<template>
  <div>
    <!--对数据进行过滤操作,用法：  管道符+添加过滤器名称  -->
    <h1>过滤器</h1>
    <div>
      <!--对数据进行小写转大写操作(过滤)-->
      <p>{{ content | upperCase }}</p>
      <!-- 过滤器效果同如下
      <p>{{content.toUpperCase()}}</p>-->
      <!--过滤器传参-->
      <p>{{ content | transform("upperCase") }}</p>
      <!--<p>{{content | transform('upperCase') | 其他过滤器 | xxx}}</p>-->
    </div>
  </div>
</template>

<script>
// 定义全局过滤器:方式1
import Vue from "vue";
Vue.filter("upperCase", value => {
  return value.toUpperCase();
});

export default {
  name: "demon9",
  data() {
    return {
      content: "hello world!"
    };
  },
  // 定义过滤器：可以设置全局过滤器在所有页面使用：方式二
  filters: {
    // 过滤器是一个函数，接收过滤的数据
    //   upperCase(value) {
    //     return value.toUpperCase();
    //   }
    // 第一个为处理的数据,第二个为过滤器的参数
    transform(value, type) {
      if (type === "upperCase") {
        return value.toUpperCase();
      } else {
        return value.toLowerCase();
      }
    }
  }
};
</script>
<style lang="stylus" scoped></style>
